*{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    height: 100vh;
}
#container{
    width: 100vw;
    height:200vh;
    margin: 0px auto;

    background-size: 100% 50%;
    transition:transform 2s;
    -moz-transition:-moz-transform 2s; /* Firefox 4 */
    -webkit-transition:-webkit-transform 2s; /* Safari and Chrome */
    -o-transition:-o-transform 2s; /* Opera */
}

/*.container:hover{*/

     /*transform:rotate(-180deg);*/
     /*-moz-transform:rotate(-180deg); !* Firefox 4 *!*/
     /*-webkit-transform:rotate(-180deg); !* Safari and Chrome *!*/
     /*-o-transform:rotate(-180deg); !* Opera *!*/
 /*}*/
#cc{
    width: 100vw;
    height: 100vh;
    float: left;
}
.cc{
    /*background-image: url("../img/index.png");*/
    background-image: url("../img/bgb.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.cd{
    background-image: url("../img/bga.png");
    /*background-image: url("../img/index01.jpg");*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/*.container{*/

    /*transform:rotate(-180deg);*/
    /*!*-moz-transform:rotate(-180deg); !* Firefox 4 *!*!*/
    /*!*-webkit-transform:rotate(-180deg); !* Safari and Chrome *!*!*/
    /*!*-o-transform:rotate(-180deg); !* Opera *!*!*/
/*}*/

.pic1{
    width: 100vw;
    height: 100vh;
    float: left;
    background-image: url("../img/index.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.pic2{
    width: 100vw;
    height: 100vh;
    float: left;
    background-image: url("../img/index01.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform:rotate(-180deg);
    -moz-transform:rotate(-180deg); /* Firefox 4 */
    -webkit-transform:rotate(-180deg); /* Safari and Chrome */
    -o-transform:rotate(-180deg); /* Opera */
}
.left{
    width: 42vw;
    height: 100vh;
    float: left;
    padding-left: 8vh;
}

.right{
    width: 45vw;
    height: 100vh;
    float: left;
    padding-right: 5vw;
}
.title{
    width: 80px;
    height: 100vh;
    font-family: 华文行楷;
    color: white;
    padding-top: 35px;
    font-size: 65px;
    float: left;
}
.content{
    width: 50px;
    height: 50vh;
    font-family: 华文楷体;
    color: white;
    text-align: center;
    padding-top: 50vh;
    font-size: 28px;
    float: left;

}
.contents{
    width: 50px;
    height: 100vh;
    font-family: 华文楷体;
    color: white;
    text-align: center;
    padding-top: 35px;
    font-size: 28px;
    float: right;

}
.ll{
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #1f1b39;
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    background-image: url("../img/ll.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

}